<template>
	<view class="score">
		<view class="score__head">
			<view class="score__head--left">
				<view class="" style="font-size: 35rpx;">我的积分：</view>
				<view class="score__head--left-num">
					<u-count-to ref="uCountTo" :startVal="startVal" :endVal="endVal" duration="3000" color="#fa8c16" :autoplay="false"></u-count-to>
				</view>
				<view class="score__head--left-right">
					<u-tag :text="'Lv.' + params.ScoreLevel" :bgColor="params.LevelColor" :borderColor="params.LevelColor" size="mini"> </u-tag>
				</view>
			</view>
			<view class="score__head--right" @click="rightClick">
				<view class="score__head--right-icon">
					<image src="@/static/theme/default/community/shangdian.png" mode=""></image>
				</view>
				<view class="score__head--right-text">兑换中心</view>
			</view>
		</view>
		<view class="score__sub" @click="goPage">
			<view class="score__sub--left">
				<text>今日获得积分：</text>
				<text style="color: #fa8c16;font-size: 35rpx;">{{todayScore}}</text>
			</view>
			<view class="score__sub--right">
				<view class="">获取记录</view>
				<view class="" style="margin-top: 5rpx;">
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#eee"></u-gap>
		<view class="score__body">
			<view class="score__body--head">
				<view class="score__body--head-item" :class="current == 0 ? 'head-active': ''" @click="change(0)">升级攻略</view>
				<view class="score__body--head-item" :class="current == 1 ? 'head-active': ''" @click="change(1)">
					<text>积分榜</text>
					<image src="@/static/theme/default/community/jifengbang.png" mode=""></image>
				</view>
				<view class="score__body--head-item" :class="current == 2 ? 'head-active': ''" @click="change(2)">等级成长</view>
			</view>
			<view class="" v-if="current == 0">
				<view class="score__body--list" v-for="item in list" :key="item.title">
					<view class="score__body--list__left">
						<view class="score__body--list__left--title">{{item.title}}</view>
						<view class="score__body--list__left--des">
							<text>积分</text>
							<text style="color: #fde14f;">+{{item.value}}</text>
							<text>，每日获取{{item.total}}次</text>
						</view>
					</view>
					<view class="score__body--list__progress">
						<view class="score__body--list__progress-box">
							<u-line-progress :percentage="item.num/item.total*100" :showText="false" activeColor="#fde14f"></u-line-progress>
						</view>
					</view>
					<view class="score__body--list__num">{{item.num}}/{{item.total}}次</view>
				</view>
			</view>
			<view class="" v-if="current == 1">
				<view class="score-list-category">
					 <u-tabs :list="category" :current="subIndex" @click="changeSubMenu"></u-tabs>
				</view>
				<view class="score-list-head">
					<view class="score-list-head__left">排名</view>
					<view class="score-list-head__center">姓名</view>
					<view class="score-list-head__right">积分</view>
				</view>
				<view class="score-list" v-for="(item,index) in scoreList" :key="index">
					<view class="score-list__left" :class="'top' + (index+1)">{{index+1}}</view>
					<view class="score-list__name">
						<view class="score-list__name--avator" @click="goHomePage(item)">
							<avator :name="item.name" :avator="item.avator"></avator>
						</view>
						<view class="score-list__name--text" @click="goHomePage(item)">{{item.name}}</view>
					</view>
					<view class="score-list__right">{{item.score}}</view>
				</view>
				<view class="" style="height: 100rpx;" v-show="userScore.name">
					<view class="score-list score-list-user">
						<view class="score-list__left" :class="'top' + userScore.Rank" v-if="userScore.Rank*1 <= 10">{{userScore.Rank}}</view>
						<view style="font-size: 25rpx;color: #aaa;width: 100rpx;text-align: center;" v-else>未上榜</view>
						<view class="score-list__name">
							<view class="score-list__name--avator">
								<avator :name="userScore.name" :avator="userScore.avator"></avator>
							</view>
							<view class="score-list__name--text">{{userScore.name}}</view>
						</view>
						<view class="score-list__right" style="color: #f5222d;font-size: 35rpx;font-weight: bold;">{{userScore.score}}</view>
					</view>
				</view>
				
			</view>
			<view class="" v-if="current == 2">
				<table>
					<thead>
						<tr>
							<th>等级</th>
							<th>所需积分</th>
						</tr>
					</thead>
					<tbody>
						<tr :style="{backgroundColor: index%2 == 0 ? '#fff' : '#f0f5ff'}" v-for="(item,index) in lvList" :key="item.lv">
							<td>
								<view class="tag" :style="{backgroundColor: item.color}">Lv.{{item.lv}}</view>
							</td>
							<td>{{item.value}}</td>
						</tr>
					</tbody>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import Avator from '@/components/custom/avator/avator.vue'
	import moment from 'moment'
	
	export default {
		components: {
			Avator
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				current: 0,
				list: [
					{
						title: '签到',
						value: 5,//增加值
						total: 1,//总次数
						num: 0,//今日次数
					},
					{
						title: '发主帖',
						value: 8,
						total: 1,
						num: 0,
					},
					{
						title: '发评论',
						value: 2,
						total: 3,
						num: 0,
					},
					{
						title: '点赞',
						value: 1,
						total: 3,
						num: 0,
					},
					{
						title: '被回复',
						value: 3,
						total: 3,
						num: 0,
					},
					{
						title: '被点赞',
						value: 2,
						total: 3,
						num: 0,
					},
					{
						title: '被收藏',
						value: 2,
						total: 5,
						num: 0,
					},
				],
				lvList: [],
				scoreList: [],
				category: [
					{
						name: '上月'
					},
					{
						name: '本月'
					},
					{
						name: '今年'
					},
					{
						name: '去年'
					},
				],
				subIndex: 1,//上月、本月、年度
				userScore: {},//当前用户排名
				params: {
					ScoreLevel: 0,
					LevelColor: ''
				},
				isSign: false,
				startVal: 0,
				endVal: 0,//无法设置为非数值，组件内部会转为0
				todayScore: 0
			}
		},
		onLoad() {
			this.getSubjectScoreLevel();
			this.getSubjectSignToday();
			this.getSubjectUserScoreSumNum();
			this.getSubjectUserScoreEveryCount();
			this.getSubjectUserScoreRank();
			this.getSubjectUserScoreSumNumInRank();
		},
		methods: {
			/**
			 * 获取今日是否签到(SignCount:签到次数=0未签到)
			 */
			getSubjectSignToday() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectSignToday',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						if(!res.length) return
						that.isSign = res[0].SignCount == '0' ? false : true;
						if(!that.isSign) {
							that.addSubjectSignToday();
						}
					},
				})
			},
			/**
			 * 今日签到
			 */
			addSubjectSignToday() {
				let that = this;
				_custom.getDataJava({
					apiname: 'addSubjectSignToday',
					code: 3,
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						uni.showToast({
							title: '签到成功',
							icon: 'none'
						})
						that.getSubjectUserScoreEveryCount();
						that.getSubjectUserScoreSumNum();
						that.getSubjectScoreLevel();
						uni.$emit('update-sign-status')
					},
					fail() {
						uni.showToast({
							title: '签到失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 获取用户积分总数
			 */
			getSubjectUserScoreSumNum() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectUserScoreSumNum',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						if(!res.length) return
						that.params = res[0];
						let sum = res[0].ScoreNum*1 || 0;
						let lastScoreNum = _data.localData('score-sum') || 0;//上次保存的积分
						let temp = sum > lastScoreNum;
						if(temp) {
							that.startVal = lastScoreNum;
							that.endVal = sum;
							_data.localData('score-sum',sum);
						} else {
							that.startVal = 0;
							that.endVal = sum;
						}
						that.$refs.uCountTo.start();
					},
				})
			},
			/**
			 * 获取积分等级数据
			 */
			getSubjectScoreLevel() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectScoreLevel',
					success(res) {
						let temp = [];
						res.forEach(item => {
							temp.push({
								lv: item.ScoreLevel,
								value: item.NeedScore,
								color: item.LevelColor
							})
						})
						that.lvList = temp;
					},
				})
			},
			/**
			 * 获取当天各种积分获取的次数
			 */
			getSubjectUserScoreEveryCount() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectUserScoreEveryCount',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						if(!res.length) return
						let todayScore = 0;
						res.forEach(item => {
							that.list[item.ScoreType*1].num = item.Count
							todayScore += (that.list[item.ScoreType*1].value*1*item.Count)
						})
						that.todayScore = todayScore;
					},
				})
			},
			/**
			 * 获取用户积分排行（月度、年度）
			 */
			getSubjectUserScoreRank() {
				let that = this;
				let createtime = '';
				switch(this.subIndex) {
					case 0:
						createtime = moment().subtract(1,'months').format('YYYY-MM')
						break;
					case 1:
						createtime = moment().format('YYYY-MM')
						break;
					case 2:
						createtime = moment().format('YYYY')
						break;
					case 3:
						createtime = moment().subtract(1,'years').format('YYYY')
						break;
				}
				_custom.getDataJava({
					apiname: 'getSubjectUserScoreRank',
					apiparam: {
						createtime,
					},
					success(res) {
						if(!res.length) {
							that.scoreList = []
							return
						}
						that.scoreList = res.map(item => {
							return {
								name: item.CreateUser,
								score: item.SumScore,
								avator: that.static_avator + "/static/photo/user/" + item.CreatePxid + "/70.jpg",
								pxid: item.CreatePxid
							}
						})
					},
				})
			},
			/**
			 * 获取当前用户积分汇总（月度、年度）
			 */
			getSubjectUserScoreSumNumInRank() {
				let that = this;
				let createtime = '';
				switch(this.subIndex) {
					case 0:
						createtime = moment().subtract(1,'months').format('YYYY-MM')
						break;
					case 1:
						createtime = moment().format('YYYY-MM')
						break;
					case 2:
						createtime = moment().format('YYYY')
						break;
					case 3:
						createtime = moment().subtract(1,'years').format('YYYY')
						break;
				}
				_custom.getDataJava({
					apiname: 'getSubjectUserScoreSumNumInRank',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						createtime
					},
					success(res) {
						if(!res.length) {
							that.userScore = {}
							return
						}
						that.userScore = {
							name: res[0].CreateUser,
							score: res[0].SumScore,
							avator: that.static_avator + "/static/photo/user/" + res[0].CreatePxid + "/70.jpg",
							...res[0]
						}
					},
				})
			},
			change(v) {
				this.current = v;
			},
			changeSubMenu(v) {
				this.subIndex = v.index;
				this.getSubjectUserScoreRank();
				this.getSubjectUserScoreSumNumInRank();
			},
			goPage() {
				uni.navigateTo({
					url: './score-detail'
				})
			},
			rightClick() {
				uni.navigateTo({
					url: './store'
				})
			},
			/**
			 * 跳转到主页
			 * @param {Object} e
			 */
			goHomePage(v) {
				let data = {
					name: v.name,
					pxid: v.pxid,
				}
				uni.navigateTo({
					url: './homepage?data=' + JSON.stringify(data)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.score {
		
		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			height: 140rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			color: #333;
			border-bottom: 1rpx solid #eee;
			
			&--left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 400rpx;
				height: 60rpx;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				background-color: rgba(0, 0, 0, .03);
				
				&-icon {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					view {
						color: #fff;
						font-size: 30rpx;
						font-weight: bold;
						text-align: center;
						line-height: 100rpx;
					}
				}
				
				&-num {
					flex: 1;
					font-size: 40rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
				
				&-right {
					display: flex;
					align-items: center;
					font-size: 25rpx;
				}
			}
			
			&--right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 200rpx;
				height: 60rpx;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				background-color: rgba(0, 0, 0, .03);
				
				&-icon {
					width: 60rpx;
					height: 60rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				&-text {
					font-size: 30rpx;
				}
			}
		}
		
		&__sub {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 0 40rpx;
			height: 100rpx;
			
			&--right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #aaa;
			}
		}
		
		&__body {
			background-color: #fff;
			
			&--head {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 100rpx;
				padding: 0 50rpx;
				box-sizing: border-box;
				border-bottom: 3rpx solid #eee;
				
				&-item {
					font-size: 32rpx;
					color: #aaa;
					display: flex;
					align-items: center;
					border-bottom: 3rpx solid transparent;
					
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			
			&--list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 20rpx;
				border-bottom: 3rpx solid #eee;
				padding: 20rpx 0;
				
				&__left {
					
					&--title {
						font-size: 32rpx;
					}
					
					&--des {
						font-size: 25rpx;
						color: #aaa;
					}
				}
				
				&__progress {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					
					&-box {
						width: 200rpx;
					}
				}
				
				&__num {
					width: 100rpx;
					text-align: center;
				}
			}
		}
	}
	
	.score-list-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		background-color: #f0f0f0;
		font-size: 28rpx;
		color: #aaa;
		padding-right: 40rpx;
		box-sizing: border-box;
		
		&__left {
			width: 100rpx;
			text-align: center;
		}
		
		&__center {
			flex: 1;
			text-align: left;
			padding-left: 40rpx;
			box-sizing: border-box;
		}
	}
	
	.score-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;
		
		&__left {
			width: 100rpx;
			height: 50rpx;
			font-size: 30rpx;
			color: #aaa;
			text-align: center;
		}
		
		&__name {
			flex: 1;
			text-align: left;
			display: flex;
			align-items: center;
			
			&--avator {
				width: 60rpx;
				height: 60rpx;
			}
			
			&--text {
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}
		
		&-user {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-image: linear-gradient(to right, rgb(252, 255, 227) 0%, #ffecd2 100%);
		}
	}
	
	.top1 {
		font-size: 30rpx;
		font-style: italic;
		color: #cf1322;
		font-weight: bold;
	}
	
	.top2 {
		font-size: 30rpx;
		font-style: italic;
		color: #fa8c16;
		font-weight: bold;
	}
	
	.top3 {
		font-size: 30rpx;
		font-style: italic;
		color: #fadb14;
		font-weight: bold;
	}
	
	table {
		margin: 20rpx auto;
		width: 700rpx;
		text-align: center;
		border-collapse:collapse;
	}
	
	thead {
		text-align: center;
		background-color: #d6e4ff;
	}
	
	thead tr {
		height: 100rpx;
	}
	
	thead tr th {
		border: 1rpx solid #eee;
		font-weight: 400;
	}
	
	tbody tr {
		height: 100rpx;
	}
	
	tbody tr td {
		border: 1rpx solid #eee;
	}
	
	.tag {
		color: #fff;
		background-color: #1890ff;
		display: inline-block;
		padding: 0 10rpx;
		font-weight: bold;
	}
	
	.head-active {
		color: #333;
		font-weight: bold;
		border-bottom: 3rpx solid #ffec3d;
	}
	
	.score__head--left-right /deep/ .u-tag__text {
		font-weight: bold;
	}
</style>
